<template>
  <div>
    <div id='formio'></div>
  </div>
</template>

<script setup lang="ts">
import { Formio } from 'formiojs';
import 'formiojs/dist/formio.form.min.css'
import { onMounted } from "vue";
import wizard from "./wizard.json"

onMounted(() => {
  const ele = document.getElementById('formio')
  if (ele) {
    Formio.createForm(document.getElementById('formio'), {
      components: [
        {
          type: 'textfield',
          label: 'Title',
          placeholder: 'Enter the title.',
          validate: {
            required: true
          },
          key: 'title',
          input: true,
          inputType: 'text'
        },
        {
          type: 'textarea',
          label: 'Content',
          wysiwyg: true,
          validate: {
            required: true
          },
          key: 'content',
          input: true,
          inputType: 'text'
        },
        {
          type: 'button',
          action: 'submit',
          label: 'Submit',
          theme: 'primary',
          key: 'submit',
          disableOnInvalid: true
        }
      ]
    }, {}).then(form => {
      form.on("submit", (submission: any) => {
        console.log(submission)
      })
    });
  }
})
</script>

<style scoped>
#formio {
  padding: 20px;
}
</style>